<template>
	<div class="header_box">
		<div class="header_tabbar">
			<div class="header_tabbar_box">
				<div class="header_tabbar_box_icon">
					<img src="@/assets/home/logo.png" alt="">
				</div>
				<div class="header_tabbar_box_list">
					<li :class="{isactive:rootName == item.name}" v-for="(item,index) in dataList.tabbar" @click="select(item.url,index)">{{item.name}}</li>
					<div v-if="!dataList.userUuid" class="header_tabbar_box_list_btn" @click="gologin">
						<img src="../../assets/home/log-icon.png" alt="">
						登录/注册
					</div>
					<div v-if="dataList.userUuid" class="header_tabbar_box_list_btn" @click="gocenter">
						<img src="../../assets/home/log-icon.png" alt="">
						个人中心
					</div>
				</div>
			</div>
		</div>
		<div class="swiperBox" v-if="rootId!==2">
			<el-carousel height="450px" :autoplay="false" arrow="always">
				<el-carousel-item v-for="(ite,idx) in dataList.bannerList" :key="ite.bannerUuid">
					<img class="swiperBox_img" :src="ite.url" alt="">
				</el-carousel-item>

			</el-carousel>
		</div>
	</div>
</template>

<script setup>
	import axios from "axios";
	import { useRouter } from 'vue-router'
	import { listBanner ,wxWeblogin ,getWxMiniUserByUuid} from '../../api/home.js'
	import {
		reactive,onBeforeMount,computed
	} from 'vue';
	const router = useRouter()
	const dataList = reactive({
		active:0,
		bannerList:'',
		userInfor:'',
		userUuid:'',
		tabbar: [{
				name: '网站首页',
				url: '/'
			},
			{
				name: '科技培训',
				url: '/science'
			},
			{
				name: '三农课堂',
				url: '/classRoom'
			},
			{
				name: '专家智库',
				url: '/thinkTank'
			},
			{
				name: '农技问答',
				url: '/essay'
			},
			{
				name: '科技成果',
				url: '/popularize'
			},
			{
				name: '新闻资讯',
				url: '/newsList'
			},
			{
				name: '任务中心',
				url: '/taskCenter'
			}
		]
	})
	onBeforeMount(()=> {
		dataList.userUuid = ''
		searchBannerF()
		
		if(localStorage.getItem('userUuid')){
			dataList.userUuid = localStorage.getItem('userUuid')
		}else{
			dataList.userUuid = ''
		}
	})
	const rootName = computed(()=> {
		return router.currentRoute.value.meta.name
	})
	const rootId = computed(()=> {
			return router.currentRoute.value.meta.id
		})
	const searchBannerF = () => {
		var data = {
			params: {
			  status: 1
			}
		}
		listBanner(data).then(res=> {
			dataList.bannerList=res.data
		})
		
	}
	
	const select = (url,idx)=> {
		dataList.active = idx
		router.push(url)
	}
	const gocenter = () => {
		router.push('/leaveList')
		
	}
	const gologin = () => {
		router.push('/login')
	}
</script>

<style lang="scss" scoped>
	.header_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.swiperBox {
			width: 1200px;
			padding-top: 30px;
		}
	}

	.el-carousel__item {
		img {
			width: 1200px;
			height: 500px;
		}
	}
	.header_tabbar{
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		&_box{
			width: 1200px;
			display: flex;
			justify-content: space-between;
			&_icon{
				display: flex;
				align-items: center;
				img{
					width: 200px;
					height: 80px;
					border-radius: 50%;
				}
				p{
					font-size: 24px;
					font-weight: 600;
					color: #11918E;
				}
			}
			&_list{
				display: flex;
				align-items: center;
				li{
					padding: 30px 0;
					margin: 0 15px;
					border-bottom: 2px solid #FFFFFF;
					font-size: 16px;
					font-weight: 400;
					color: #333333;
				}
				&_btn{
					color: #FFFFFF;
					background-color: #11918E;
					padding: 8px 15px;
					border-radius: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 50px;
					font-size: 16px;
					font-weight: 400;
					cursor: pointer;
					img{
						width: 21px;
						padding-right: 5px;
					}
				}
				.isactive{
					color: #11918E;
					border-bottom: 2px solid #11918E;
				}
			}
		}
	}
</style>